<script setup>
// // import HotView from '@/components/HotView/HotView.vue';
// import ShopCardView from '@/components/ShopCardView/ShopCardView.vue';
// import { getCurrentInstance } from 'vue';
const articles = ref([
    {
        usename: '张三',
        avator: '/static/logo.png'
    },
    {
        usename: '李四',
        avator: '/static/logo.png'
    }
]);
// 获取全局变量的引用
const instance = getCurrentInstance();
const gProperties = instance.appContext.config.globalProperties;

// 轮播图
const titleNViewBackground = ref('');
const carouselList = ref([]);
const swiperCurrent = ref(0);
const swiperLength = ref(0);
const swiperChange = (e) => {
    const index = e.detail.current;
    swiperCurrent.value = index;
    titleNViewBackground.value = carouselList.value[index].background;
};
const navToDetailPage = () => {
    //测试数据没有写id，用title代替
    //   let id = item.title;
    //   uni.navigateTo({
    //     url: `/pages/product/product?id=${id}`
    //   });
    // }
};

// 商品
const goodsList = ref([
    {
        image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg',
        image2: 'http://pic.rmb.bdstatic.com/819a044daa66718c2c40a48c1ba971e6.jpeg',
        image3: 'http://img001.hc360.cn/y5/M00/1B/45/wKhQUVYFE0uEZ7zVAAAAAMj3H1w418.jpg',
        title: '古黛妃 短袖t恤女夏装2019新款韩版宽松',
        price: 179,
        sales: 61
    }
]);

// 声明周期方法
onLoad((event) => {
    loadData();
});

const loadData = async () => {
    let bannarData = await gProperties.$api.json('carouselList');
    titleNViewBackground.value = bannarData[0].background;
    swiperLength.value = bannarData.length;
    carouselList.value = bannarData;
    let goodData = await gProperties.$api.json('goodsList');
    goodsList.value = goodData || [];
    console.log('goodsList：' + goodsList.value[0]);
};
</script>

<template>
    <view class="container">
        <!-- 小程序头部兼容 -->
        <!-- #ifdef MP -->
        <view class="mp-search-box">
            <input class="ser-input" type="text" value="输入关键字搜索" disabled />
        </view>
        <!-- #endif -->
        <!-- 头部轮播 -->
        <view class="carousel-section">
            <!-- 标题栏和状态栏占位符 -->
            <view class="titleNview-placing"></view>
            <!-- 背景色区域 -->
            <view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
            <swiper class="carousel" circular @change="swiperChange" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({ title: '轮播广告' })">
                    <image :src="item.src" />
                </swiper-item>
            </swiper>
            <!-- 自定义swiper指示器 -->
            <view class="swiper-dots">
                <text class="num">{{ swiperCurrent + 1 }}</text>
                <text class="sign">/</text>
                <text class="num">{{ swiperLength }}</text>
            </view>
        </view>

        <!-- 分类 -->
        <view class="cate-section">
            <navigator hover-class="navigator-hover" url="/pages/shop/shoplist">
                <view class="cate-item">
                    <image src="/static/temp/c3.png"></image>
                    <text>环球美食</text>
                </view>
            </navigator>
            <view class="cate-item">
                <image src="/static/temp/c5.png"></image>
                <text>个护美妆</text>
            </view>
            <view class="cate-item">
                <image src="/static/temp/c6.png"></image>
                <text>营养保健</text>
            </view>
            <view class="cate-item">
                <image src="/static/temp/c7.png"></image>
                <text>家居厨卫</text>
            </view>
            <view class="cate-item">
                <image src="/static/temp/c8.png"></image>
                <text>速食生鲜</text>
            </view>
        </view>

        <view class="ad-1">
            <image src="/static/temp/ad1.jpg" mode="scaleToFill"></image>
        </view>

        <!-- 商品特惠 -->
        <HotView></HotView>
        <!-- 附近商家 -->
        <view class="caption">
            <text class="text">附近商家</text>
        </view>
        <view class="nearby-shop">
            <ShopCardView v-for="(item, index) in articles" :username="item.usename" :avator="item.avator" />
        </view>
    </view>
</template>

<style lang="scss" scoped>
/* #ifdef MP */
.mp-search-box {
    position: absolute;
    left: 0;
    top: 30rpx;
    z-index: 9999;
    width: 100%;
    padding: 0 80rpx;
    .ser-input {
        flex: 1;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        font-size: 28rpx;
        color: $font-color-base;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.6);
    }
}
page {
    .cate-section {
        position: relative;
        z-index: 5;
        border-radius: 16rpx 16rpx 0 0;
        margin-top: -20rpx;
    }
    .carousel-section {
        padding: 0;
        .titleNview-placing {
            padding-top: 0;
            height: 0;
        }
        .carousel {
            .carousel-item {
                padding: 0;
            }
        }
        .swiper-dots {
            left: 45rpx;
            bottom: 40rpx;
        }
    }
}
/* #endif */

page {
    background: #f5f5f5;
}
.m-t {
    margin-top: 16rpx;
}
/* 头部 轮播图 */
.carousel-section {
    position: relative;
    padding-top: 10px;

    .titleNview-placing {
        height: var(--status-bar-height);
        padding-top: 44px;
        box-sizing: content-box;
    }

    .titleNview-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 426rpx;
        transition: 0.4s;
    }
}
.carousel {
    width: 100%;
    height: 350rpx;

    .carousel-item {
        width: 100%;
        height: 100%;
        padding: 0 28rpx;
        overflow: hidden;
    }

    image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
    }
}
.swiper-dots {
    display: flex;
    position: absolute;
    left: 60rpx;
    bottom: 15rpx;
    width: 72rpx;
    height: 36rpx;
    background-image: url();
    background-size: 100% 100%;

    .num {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50px;
        font-size: 24rpx;
        color: #fff;
        text-align: center;
        line-height: 36rpx;
    }

    .sign {
        position: absolute;
        top: 0;
        left: 50%;
        line-height: 36rpx;
        font-size: 12rpx;
        color: #fff;
        transform: translateX(-50%);
    }
}
/* 分类 */
.cate-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 30rpx 22rpx;
    background: #fff;
    .cate-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: $font-sm + 2rpx;
        color: $font-color-dark;
    }
    /* 原图标颜色太深,不想改图了,所以加了透明度 */
    image {
        width: 88rpx;
        height: 88rpx;
        margin-bottom: 14rpx;
        border-radius: 50%;
        opacity: 0.7;
        box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
    }
}
.ad-1 {
    width: 100%;
    height: 210rpx;
    padding: 10rpx 0;
    background: #fff;
    image {
        width: 100%;
        height: 100%;
    }
}
/* 秒杀专区 */
.seckill-section {
    padding: 4rpx 30rpx 24rpx;
    background: #fff;
    .s-header {
        display: flex;
        align-items: center;
        height: 92rpx;
        line-height: 1;
        .s-img {
            width: 140rpx;
            height: 30rpx;
        }
        .tip {
            font-size: $font-base;
            color: $font-color-light;
            margin: 0 20rpx 0 40rpx;
        }
        .timer {
            display: inline-block;
            width: 40rpx;
            height: 36rpx;
            text-align: center;
            line-height: 36rpx;
            margin-right: 14rpx;
            font-size: $font-sm + 2rpx;
            color: #fff;
            border-radius: 2px;
            background: rgba(0, 0, 0, 0.8);
        }
        .icon-you {
            font-size: $font-lg;
            color: $font-color-light;
            flex: 1;
            text-align: right;
        }
    }
    .floor-list {
        white-space: nowrap;
    }
    .scoll-wrapper {
        display: flex;
        align-items: flex-start;
    }
    .floor-item {
        width: 150rpx;
        margin-right: 20rpx;
        font-size: $font-sm + 2rpx;
        color: $font-color-dark;
        line-height: 1.8;
        image {
            width: 150rpx;
            height: 150rpx;
            border-radius: 6rpx;
        }
        .price {
            color: $uni-color-primary;
        }
    }
}

.f-header {
    display: flex;
    align-items: center;
    height: 140rpx;
    padding: 6rpx 30rpx 8rpx;
    background: #fff;
    image {
        flex-shrink: 0;
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
    }
    .tit-box {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .tit {
        font-size: $font-lg + 2rpx;
        color: #font-color-dark;
        line-height: 1.3;
    }
    .tit2 {
        font-size: $font-sm;
        color: $font-color-light;
    }
    .icon-you {
        font-size: $font-lg + 2rpx;
        color: $font-color-light;
    }
}
/* 团购楼层 */
.group-section {
    background: #fff;
    .g-swiper {
        height: 650rpx;
        padding-bottom: 30rpx;
    }
    .g-swiper-item {
        width: 100%;
        padding: 0 30rpx;
        display: flex;
    }
    image {
        width: 100%;
        height: 460rpx;
        border-radius: 4px;
    }
    .g-item {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .left {
        flex: 1.2;
        margin-right: 24rpx;
        .t-box {
            padding-top: 20rpx;
        }
    }
    .right {
        flex: 0.8;
        flex-direction: column-reverse;
        .t-box {
            padding-bottom: 20rpx;
        }
    }
    .t-box {
        height: 160rpx;
        font-size: $font-base + 2rpx;
        color: $font-color-dark;
        line-height: 1.6;
    }
    .price {
        color: $uni-color-primary;
    }
    .m-price {
        font-size: $font-sm + 2rpx;
        text-decoration: line-through;
        color: $font-color-light;
        margin-left: 8rpx;
    }
    .pro-box {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        font-size: $font-sm;
        color: $font-base;
        padding-right: 10rpx;
    }
    .progress-box {
        flex: 1;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 8rpx;
    }
}
/* 分类推荐楼层 */
.hot-floor {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20rpx;
    .floor-img-box {
        width: 100%;
        height: 320rpx;
        position: relative;
        &:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
        }
    }
    .floor-img {
        width: 100%;
        height: 100%;
    }
    .floor-list {
        white-space: nowrap;
        padding: 20rpx;
        padding-right: 50rpx;
        border-radius: 6rpx;
        margin-top: -140rpx;
        margin-left: 30rpx;
        background: #fff;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 1;
    }
    .scoll-wrapper {
        display: flex;
        align-items: flex-start;
    }
    .floor-item {
        width: 180rpx;
        margin-right: 20rpx;
        font-size: $font-sm + 2rpx;
        color: $font-color-dark;
        line-height: 1.8;
        image {
            width: 180rpx;
            height: 180rpx;
            border-radius: 6rpx;
        }
        .price {
            color: $uni-color-primary;
        }
    }
    .more {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-shrink: 0;
        width: 180rpx;
        height: 180rpx;
        border-radius: 6rpx;
        background: #f3f3f3;
        font-size: $font-base;
        color: $font-color-light;
        text:first-child {
            margin-bottom: 4rpx;
        }
    }
}
/* 猜你喜欢 */
.guess-section {
    display: flex;
    flex-wrap: wrap;
    padding: 0 30rpx;
    background: #fff;
    .guess-item {
        display: flex;
        flex-direction: column;
        width: 48%;
        padding-bottom: 40rpx;
        &:nth-child(2n + 1) {
            margin-right: 4%;
        }
    }
    .image-wrapper {
        width: 100%;
        height: 330rpx;
        border-radius: 3px;
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
            opacity: 1;
        }
    }
    .title {
        font-size: $font-lg;
        color: $font-color-dark;
        line-height: 80rpx;
    }
    .price {
        font-size: $font-lg;
        color: $uni-color-primary;
        line-height: 1;
    }
}
.nearby-shop {
    // background: $uni-bg-color;
    // margin: 0 10 0;
    // padding: 10rpx 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-height: 328rpx;
}

.caption {
    display: flex;
    justify-content: center;
    line-height: 1;
    padding: 10rpx 0 10rpx;
    font-size: $list-font-base;
    color: orange;
    .text {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 28rpx 0 30rpx;
        &::before,
        &::after {
            content: '';
            width: 20rpx;
            height: 20rpx;
            background-image: url(@/static/icon/icn-line.png);
            background-size: contain;
            margin: 0 10rpx;
        }
    }
}
</style>
